<template>
    <div class="box">
        <van-nav-bar
            title="订单详情"
            left-arrow
            @click-left="back()"
            class="navBar"
            :border="false"
        ></van-nav-bar>
        <div class="container">
            <ul class="list-wrap">
                <li class="first">
                    <div class="title ellipsis">
                        订单编号：{{ orderInfo.orderSn }}
                    </div>
                    <div class="content">{{orderStatusFilter[orderInfo.status/10]}}</div>
                </li>
                <li>
                    <div class="title">下单时间：</div>
                    <div class="content">{{ orderInfo.createTime }}</div>
                </li>
                <li>
                    <div class="title">订单金额:</div>
                    <div class="content">￥{{ orderInfo.price }}</div>
                </li>
                <li>
                    <div class="title">顾客姓名:</div>
                    <div class="content">{{ orderInfo.name }}</div>
                </li>
                <li>
                    <div class="title">顾客手机号:</div>
                    <div class="content">{{ orderInfo.tel }}</div>
                </li>
                <li>
                    <div class="title">开单员工:</div>
                    <div class="content">{{ orderInfo.staffName }}</div>
                </li>
                <li>
                    <div class="title">订单备注:</div>
                    <div class="content">{{ orderInfo.remark }}</div>
                </li>
                <li>
                    <div class="title">收货方式:</div>
                    <div class="content">到店取货</div>
                </li>
                <li>
                    <div class="title">提货门店:</div>
                    <div class="content">{{ orderInfo.pickStore }}</div>
                </li>
                <li>
                    <div class="title">收货地址:</div>
                    <div class="content">{{ orderInfo.addressXq }}</div>
                </li>
                <li>
                    <div class="title">物流单号:</div>
                    <div class="content"></div>
                </li>
                <li>
                    <div class="title">商品信息:</div>
                    <div class="content me-fx-col">
                        <span v-for="p in orderInfo.products" :key="p.pid"
                            >{{ p.name }} x{{ p.num }} &nbsp;
                        </span>
                    </div>
                </li>
                <!-- <li>
                    <div class="title">订单状态：</div>
                    <div class="content">
                        {{ orderStatusFilter[orderInfo.orderStatus] }}
                    </div>
                </li> -->

                
                <li class="last">
                    <div class="title">付款时间:</div>
                    <div class="content">{{ orderInfo.addtime }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
//1.未付款 2.待(提)收货 3.已完成 4.已关闭
const orderStatusFilter = [, "未付款", "待(提)收货", "已完成", "已关闭"];
import { useRoute, useRouter } from "vue-router";
import { marketDetail } from "api/sales.js";
import { onMounted, ref } from "vue";
const router = useRouter();
const route = useRoute();
let orderInfo = ref({});
const back = () => {
    router.back();
};
onMounted(async () => {
    //orderId:订单ID、orderSn:订单编号
    let params = { orderId: route.params.id, orderSn: route.params.sn };
    let res = await marketDetail(params);
    console.log(res);
    var obj = res.data;
    obj.products = JSON.parse(obj.products);
    orderInfo.value = obj;
});
</script>
<style lang="scss" scoped>
ul {
    margin: 0px;
    padding: 0.9375rem;
    padding-top: 0;
    background-color: #fff;
    border-radius: 0.625rem;
    li {
        font-size: 0.875rem /* 14/16 */;
        margin: .9375rem 0;
        display: flex;
        &.first {
            // padding-bottom: .9375rem;
            padding: .9375rem 0;
            margin: 0;
            border-bottom: 1px solid #e5ebef;
            .title {
                color: #101d34 !important;
                width: 70%;
            }
            .content {
                color: #8195a5;
                text-align: right;
            }
        }
        &.last{
            border-top: 1px solid #e5ebef;
            margin: 0;
            padding: .9375rem 0 0 ;
        }
        div {
            &.title {
                width: 90px;
                text-align: left;
                color: #49596d;
            }
            &.content {
                flex: 1;
                text-align: right;
                color: #101D34;
            }
        }
    }
}
</style>
// 新的样式
<style lang="scss" scoped src="../../styles/public.scss"></style>
<style lang="scss" scoped>
</style>